<template>
  <div class="citygroup">
    <van-index-bar>
        <!-- 热门数据展示 -->
      <van-index-anchor index="热门" />
      <div class="list">
        <template v-for="(city, index) in groupData.hotCities">
          <div class="city" @click="cityClick(city)">{{ city.cityName }}</div>
        </template>
      </div>
     <!-- 非热门数据展示 -->
       <template v-for="(group,index) in groupData.cities">
        <van-index-anchor :index="group.group" />
             <template v-for="(city,indey) in group.cities">
                <van-cell :title="city.cityName" @click="cityClick(city)" />
             </template>
       </template>
   
  </van-index-bar>

  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import cityStore from '@/stores/modules/city';
const store=new cityStore()
const router=useRouter()

   const props= defineProps({
        groupData:{
            type:Object,
            default:()=>({})
        }
    })
    //  点击城市处理函数
    function cityClick(City){
       store.currentCity=City
        // 返回上一级
        router.back()
        
    }

    


    
</script>

<style lang="less" scoped>

.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 10px;
  padding-right: 25px;

  .city {
    width: 70px;
    height: 28px;
    border-radius: 14px;
    font-size: 12px;
    color: #000;
    text-align: center;
    line-height: 28px;
    background-color: #fff4ec;
    margin: 6px 0;
  }
}


</style>